<template>
    <div class="gd-viewport"> 
      <div class="top">
        <div class="gd-top">
          <a type="1"  class="active">全部知识</a>
          <a  type="2">CNKI知识</a>
          <a type="3">本地知识</a>
        </div>
        <!-- 搜素框 -->
        <div class="gd-bottom">
            <div class="search"> 
              <div class="select" @click="getSelect">
                <span style="margin-left: 5px; float: left">{{chooseObj.name}}</span>
                <img src="@/assets/img/select.png" alt="" />
              </div>
              <div class="inputDis">
                  <input type="text" v-model="searchInput" class="searchInput" placeholder="在知识库中检索"> 
                  <span class="btn" @click="search">检索</span>
                  <span class="iconfont"  @click="voiceBegain">&#xe70c;</span> 
              </div>
            </div>
            <div class="btn" @click="goTO('moreSearch')">
                  高级检索
            </div> 
        </div> 
      </div>
        
        
        <!-- 下拉列表 -->
        <mt-popup v-model="selectModal"  pointer-events="none" position="bottom">
          <mt-picker ref="picker"   :show-toolbar="true" :slots="selectObj" @change="onValuesChange"> 
            <div class="listButton">
                <mt-button @click="clickConfirm"  style="background:#367bf0;color:#fff" class="sure">确认</mt-button>
            </div>
          </mt-picker>
        </mt-popup>
        
      </div> 
</template>


<script>    

export default {
  name: "homeSearch",
  data() {
    return {  
      wherestr:"",
      strObj:{},
      searchInput:"",
      selectModal:false,
      selectObj: [
        {
          flex: 1,
          values: ["题名", "全文", "关键词"],
          className: "slot1",
          textAlign: "center",
        },
      ], 
      chooseObj:{name:"主题"},  
      websocket:null, 
			searchText:'',
      searchValue:'',
      // 语音功能
    };
  },
  created(){
  },
  mounted() {

    $(".gd-top a").click(function(event) {
      $(this)
        .addClass("active")
        .siblings("a")
        .removeClass("active");
    });   
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    }
  },
  methods: {
    search(i) { 
      this.strObj = {};
      this.strObj[this.chooseObj.name] = this.searchInput;

      if(!this.searchInput) {
        this.wherestr = ""
      }else {
        this.wherestr = `${this.chooseObj.name}%=${this.searchInput}`
      }
      
      let obj = {
        type:Number($(".active").attr("type")),
        pagenow:1,
        pagesize:10,
        wherestr:encodeURI(this.wherestr),
        orderstr:"RELEVANT",
      };
      if(i === "search") {
        obj.pagenow = 1;
      }
      this.$router.push({path:"/searchResult",query:obj})
    },  
    goTO(className){  
       this.$router.push('/'+className+"?type="+Number($(".active").attr("type"))+"&orderstr=RELEVANT");
    },
    getSelect() {
      this.selectModal = true;
    },
    /* 题名 */
    onValuesChange(picker, values) { 
        this.chooseObj.name = values[0];
    }, 
    clickConfirm() {
      this.selectModal = false;
    }, 
      // 调用讯飞语音识别
			voiceBegain() {
				let _this = this;
				let options = {};
				//#ifdef APP-PLUS || APP-PLUS-NVUE
				options.engine = 'baidu';
				options.punctuation = false; // 是否需要标点符号 
				options.timeout = 10 * 1000; //语音录入持续时长
				plus.speech.startRecognize(options, function(s) {
					// 打印输出结果
					 _this.searchInput = s
					// 关闭语音
					plus.speech.stopRecognize();
				});

			},

  }, 
  
};
</script>
<style lang="scss" scoped>
@import "../../../assets/css/homeSearch.css"; 
.gd-viewport {
  width: 100%;
}
.mint-popup-bottom {
  bottom:60px;
}
.listButton { 
  width:100%;
  height:100%;
  text-align: right;
}
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}  
  // 选择
  /deep/.mint-popup-bottom {
    bottom:0;
  } 
  /deep/.listButton {
    border-bottom:1px solid #ddd;
  }
</style>